<!--
 * @Author: C.
 * @Date: 2021-08-31 13:11:05
 * @LastEditTime: 2021-09-03 15:47:14
 * @Description: file content
-->
<template>
  <div :style="{ width: block.style.w + 'px', height: block.style.h + 'px' }">
    <Vue3DraggableResizable
      :initW="block.style.w"
      :initH="block.style.h"
      :handles="['bm', 'mr']"
      :x="0"
      :y="0"
      :w="block.style.w"
      :h="block.style.h"
      :disabledX="true"
      :disabledY="true"
      classNameDraggable="draggable"
      class="zz"
      @resizing="setSize"
      @activated="setActivated"
    />
    <DraggableContainer>
      <!-- <DragField />
      <DragField /> -->
      <template v-for="blockItem in block.nodes">
        <DragField
          v-if="blockItem.role == 'label' || (blockItem.role == 'value' && blockItem.show)"
          :key="blockItem.id"
          :cdata="blockItem"
          :blockName="name"
        />
        <DragQr
          v-if="blockItem.role == 'qrcode' && blockItem.show"
          :key="blockItem.id"
          :cdata="blockItem"
          :blockName="name"
        />
      </template>
    </DraggableContainer>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import DragField from './cpn/DragField.vue';
  import DragQr from './cpn/DragQr.vue';
  import Vue3DraggableResizable from 'vue3-draggable-resizable';
  import { DraggableContainer } from 'vue3-draggable-resizable';
  import { usePrintStore } from '/@/store/modules/print';
  export default defineComponent({
    components: { Vue3DraggableResizable, DragField, DraggableContainer, DragQr },
    props: {
      name: {
        type: String,
        default: 'body',
      },
    },
    setup(props) {
      let printStore = usePrintStore();
      console.log(printStore.printTemplate, 456456);
      let block = computed({
        get: () => printStore.printTemplate[props.name],
        set: (x) => {
          console.log(x);
        },
      });

      function setSize(a) {
        Object.assign(printStore.printTemplate[props.name].style, a);
      }
      function setActivated() {
        printStore.setToggle([props.name]);
      }

      return {
        setSize,
        block,
        setActivated,
      };
    },
  });
</script>
<style lang="less">
  .draggable {
    border: 1px dashed #ccc;
  }

  .zz {
    z-index: 6;
  }
</style>
